<template>
    <div class="stock-manage">
        <van-list v-model="stock.loading" :finished="stock.finished" finished-text="没有更多了" @load="controllerRequestStockData">
            <order-list-by-delete v-for="(item, index) in stock.items"
                @onSelectState="eventOnSelectItemOperate" @onDelete="eventOnItemDelete"
                :index="index" :title="item.title" :unit="item.unit" :number="item.number" :key="index" class="list-item bottom-ash-line"
            />
            <p v-if="stock.items.length == 0" class="stock-empty">还没有库存，请先添加！</p>
        </van-list>
        <van-button @click="eventClickAddStockItem" icon="plus" type="primary" text="添加库存" class="plus-predict-price full-width" />
        <div class="page-bottom-bar">
            <div class="flex-item check-all-select">
                <van-checkbox v-model="allSelectState">全选</van-checkbox>
            </div>
            <div class="flex-item tip-message">已选择 {{ $store.state.shop.stock.select.length }} 条数据</div>
            <div class="flex-item">
                <span @click="eventClickDeleteSelectItem" class="bar-button bar-button-green">删除选中</span>
            </div>
        </div>
    </div>
</template>

<script>
    import { Button, List, Switch, Checkbox } from 'vant';
    import OrderListByDelete from  '../../components/currency/order-list/order-delete.vue';
    export default {
        name: 'ShopStockManage',
        components:{
            [Button.name]: Button,
            [List.name]: List,
            [Switch.name]: Switch, [Checkbox.name]: Checkbox,
            OrderListByDelete
        },
        data() {
            return {
                stock: {
                    loading: false, finished: false,
                    page: 0, limit: 30, total: 0,
                    items: []
                }
            }
        },
        computed: {

            allSelectState: {
                get() {
                    return this.$store.state.shop.stock.allSelect;
                },
                set() {
                    this.$store.commit('shop/setElementValue', [{
                        key: 'stock.allSelect', value: !this.$store.state.shop.stock.allSelect
                    }]);
                }
            }
        },
        mounted() {
            this.$store.commit('shop/setElementValue', [
                {
                    key: 'operateMode', value: 'stock'
                },
                {
                    key: 'stock.select', value: []
                },
                {
                    key: 'stock.allSelect', value: false
                }
            ]);
        },
        created(){
            this.controllerRequestStockData();
        },
        methods: {
            controllerRequestStockData() {
                this.stock.loading = true;
                var url = '/api/home/user/StockList',
                    params = {
                        // u_id: '',
                        page: this.stock.page,
                        list_rows: this.stock.limit,
                        token: this.$store.state.options.user.token
                    };

                this.$util.postRequestInterface(url, params, (res) => {
                    if(!res.data) {
                        this.stock.finished = true;
                        this.stock.loading = false;
                        return;
                    }

                    this.stock.page++;
                    this.stock.total = res.data.count;
                    for(let x of res.data.data) {
                        this.stock.items.push({
                            stockItemId: x.id,
                            id: x.garbageid,
                            idList: x.garbagepgalist,
                            title: x.garbagename,
                            pga: x.garbagepga,
                            // weight: (x.weighting_method == 0) ? x.weighting_num : '',
                            // number: (x.weighting_method == 1) ? x.weighting_num : ''
                            number: x.number,
                            unit: x.danweiming
                        });
                    }
                    if(this.stock.items.length >= res.data.count) this.stock.finished = true;
                    this.stock.loading = false;
                });
            },
            eventClickAddStockItem() {
                this.$store.commit('shop/setElementValue', [
                    {key: 'operateMode', value: 'stock'}
                ]);

                this.$router.push('/shop/order-item-add-normal');
            },
            eventOnSelectItemOperate(params) {

                this.$store.commit('shop/stockSelectItemOperate', params);
            },
            eventOnItemDelete(index) {
                let url = '/api/home/user/delStock',
                    params = {
                        id: this.stock.items[index].stockItemId,
                        token: this.$store.state.options.user.token
                    };
                this.$util.postRequestInterface(url, params, (res) => {
                    this.stock.items.splice(index, 1);
                });
            },
            eventClickDeleteSelectItem() {
                if(this.$store.state.shop.stock.select.length == 0) {
                    this.$toast('必须选中一项才可以操作');
                    return;
                }
                var idList = [];
                for(let x of this.$store.state.shop.stock.select) {
                    idList.push(this.stock.items[x].stockItemId);
                }
                var url = '/api/home/user/bulkdelete',
                    params = {
                        stocklist: JSON.stringify(idList),
                        token: this.$store.state.options.user.token
                    };

                this.$util.postRequestInterface(url, params, (res) => {
                    var result = [];
                    for(let x of this.stock.items) {
                        let pushStatus = true;
                        for(let y of idList) {
                            if(x.stockItemId == y) {
                                pushStatus = false;
                                break;
                            }
                        }
                        if(pushStatus) result.push(x);
                    }
                    this.stock.items = result;

                    this.$store.commit('shop/setElementValue', [
                        {
                            key: 'stock.select', value: []
                        },
                        {
                            key: 'stock.allSelect', value: false
                        }
                    ]);
                });
            }
        }
    }
</script>

<style lang='scss' scoped>
    @import "../../libs/styles/bottom-fixed-bar.scss";

    .stock-manage {

        .plus-predict-price {
            margin-top: 1.6rem;
            border-radius: 0.3rem;
            background-color: #00CC00;
        }

        .list-item {
            padding: 1rem;
            padding-left: 1rem;
        }
    }

    .stock-empty {
        margin: 1.6rem 1rem;
        font-size: 1.6rem;
    }
</style>
